<template>
  <div class="page-container-padding">
    <el-tabs v-model="currentSettingName" tab-position="left">
      <el-tab-pane label="个人资料" name="baseMessage">
        <div class="base-info">
          <div class="info-part">
            <div class="part-label">系统信息</div>
            <div
              v-for="(item, index) in userObj.sysInfo"
              :key="index"
              class="msg-box"
            >
              <span class="msg-label">{{ item.title }}</span>
              <span class="msg-fixed-content">{{ item.text }}</span>
            </div>
          </div>
          <div class="info-part">
            <div class="part-label">
              <span>基础资料</span>
              <span
                v-if="userObj.editBaseInfo"
                style="margin-left: 16px; cursor: pointer"
                @click="toSaveBaseInfo"
              >
                <i class="el-icon-success"></i>
                保存
              </span>
              <span
                v-else
                style="margin-left: 16px; cursor: pointer"
                @click="userObj.editBaseInfo = true"
              >
                <i class="el-icon-edit-outline"></i>
                编辑
              </span>
            </div>
            <div
              v-for="(item, index) in userObj.baseInfo"
              :key="index"
              class="msg-box"
            >
              <span class="msg-label">{{ item.title }}</span>
              <span class="msg-content">
                <span v-if="userObj.editBaseInfo && item.canEdit">
                  <el-input v-model="item.text"></el-input>
                </span>
                <span v-else>{{ item.text }}</span>
              </span>
            </div>
          </div>
          <div v-if="userObj.showCertificates" class="info-part">
            <div class="part-label">
              <span>资格证书</span>
              <span
                style="margin-left: 16px; cursor: pointer"
                @click="toShowAddDialog('certificate')"
              >
                <i class="el-icon-circle-plus"></i>
                新增
              </span>
            </div>
            <div
              v-for="(item, index) in userObj.certificates"
              :key="index"
              class="msg-box"
            >
              <span class="msg-width-label">
                {{ item.date.substring(0, 7) }}
              </span>
              <span class="msg-content">
                {{ item.name }}
                <span v-if="item.code">({{ item.code }})</span>
                <span
                  class="dele-btn"
                  @click="toDelCertificatePrize(item, 'certificate')"
                >
                  <i class="el-icon-error"></i>
                </span>
              </span>
            </div>
          </div>
          <div v-if="userObj.showPrizes" class="info-part">
            <div class="part-label">
              <span>获奖情况</span>
              <span
                style="margin-left: 16px; cursor: pointer"
                @click="toShowAddDialog('prizes')"
              >
                <i class="el-icon-circle-plus"></i>
                新增
              </span>
            </div>
            <div
              v-for="(item, index) in userObj.prizes"
              :key="index"
              class="msg-box"
            >
              <span class="msg-width-label">
                {{ item.date.substring(0, 7) }}
              </span>
              <span class="msg-content">
                {{ item.name }}
                <span
                  class="dele-btn"
                  @click="toDelCertificatePrize(item, 'prizes')"
                >
                  <i class="el-icon-error"></i>
                </span>
              </span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="基本设置">基本设置</el-tab-pane> -->
      <el-tab-pane label="密码修改" name="safeSetting">
        <div style="width: 500px">
          <el-form label-width="100px" :model="userPassword">
            <el-form-item label="原密码">
              <el-input
                v-model="userPassword.raw_password"
                placeholder="输入您的6-20位原密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input
                v-model="userPassword.new_password1"
                placeholder="输入您的6-20位新密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input
                v-model="userPassword.new_password2"
                placeholder="确认您的6-20位新密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div style="float: right">
                <el-button type="primary" @click="confirmModifyPassword">
                  提交修改
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="账户绑定">账户绑定</el-tab-pane> -->
    </el-tabs>
    <!-- 资格证书和获奖情况添加弹窗 -->
    <el-dialog
      :visible.sync="userObj.showEditDialog"
      :title="userObj.editDialogTitle"
      width="400px"
    >
      <el-form label-width="80px">
        <el-form-item :label="userCertificatePrize.dateString">
          <el-date-picker
            v-model="userCertificatePrize.date"
            placeholder="填写取得的日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <div style="font-size: 12px; color: #e82524">
            {{ userCertificatePrize.datetips }}
          </div>
        </el-form-item>
        <el-form-item label="名称">
          <el-input
            v-model="userCertificatePrize.name"
            placeholder="请填写证书或奖项的记录名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="userCertificatePrize.currentAction === 'certificate'"
          label="证书号"
        >
          <el-input
            v-model="userCertificatePrize.certificateNumber"
            placeholder="请填写证书号"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="infor" @click="userObj.showEditDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="toAddCertificatePrize">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    modifyPassword,
    userCenterInformation,
    userCenterModifyInfo,
    createCertificatePrize,
    delCertificatePrize,
  } from '@/api/user'
  export default {
    name: 'PersonalCenter',
    data() {
      return {
        currentSettingName: 'baseMessage',
        userObj: {
          showEditDialog: false,
          editDialogTitle: '',
          editDialogName: '',
          editBaseInfo: false,
          sysInfo: [],
          baseInfo: [],
          certificates: [],
          showCertificates: false,
          prizes: [],
          showPrizes: false,
        },
        userCertificatePrize: {
          currentAction: '',
          date: datetimeToStr(new Date(), true, '-'),
          dateString: '日期',
          datetips: '填写考试通过的日期，可只精确到月份',
          name: null,
          certificateNumber: '',
        },
        userPassword: {
          raw_password: '',
          new_password1: '',
          new_password2: '',
        },
      }
    },
    created() {},
    mounted() {
      this.getUserInformation()
    },
    methods: {
      // 确认修改密码
      confirmModifyPassword() {
        if (
          !this.userPassword.raw_password ||
          !this.userPassword.new_password1 ||
          !this.userPassword.new_password2
        ) {
          this.$baseMessage('请输入完整密码!', 'error')
          return
        }
        if (
          this.userPassword.new_password1 !== this.userPassword.new_password2
        ) {
          this.$baseMessage('两次输入密码不一致!', 'error')
          return
        }
        modifyPassword(this.userPassword).then((res) => {
          if (res.code === 200) {
            this.$baseMessage(res.msg, 'success')
            this.$alert('修改成功，请重新登录！', '温馨提示', {
              confirmButtonText: '确定',
              type: 'info',
            }).then(async () => {
              await this.$store.dispatch('user/logout')
              this.$router.push({ name: 'login' })
            })
          } else {
            this.$baseMessage(res.msg, 'error')
          }
        })
      },

      // 显示弹窗
      toShowAddDialog(name) {
        this.userObj.editDialogName = name
        this.userCertificatePrize.date = datetimeToStr(new Date(), true, '-')
        this.userCertificatePrize.name = null
        switch (name) {
          case 'certificate':
            this.userObj.editDialogTitle = '添加证书记录'
            this.userCertificatePrize.currentAction = 'certificate'
            this.userCertificatePrize.datetips = '填写考试通过的日期，可只精确到月份'
            this.userObj.showEditDialog = true
            break
          case 'prizes':
            this.userObj.editDialogTitle = '添加奖项记录'
            this.userCertificatePrize.currentAction = 'prizes'
            this.userCertificatePrize.certificateNumber = ''
            this.userCertificatePrize.datetips = '填写获奖的日期，可只精确到月份'
            this.userObj.showEditDialog = true
            break
          default:
            break
        }
      },

      // 保存证书或奖项记录
      toAddCertificatePrize() {
        const bodyData = {
          date: this.userCertificatePrize.date,
          name: this.userCertificatePrize.name,
          code: this.userCertificatePrize.certificateNumber,
          key_name: this.userObj.editDialogName,
        }
        createCertificatePrize(bodyData).then((res) => {
          this.$baseMessage('保存成功', 'success')
          this.userObj.showEditDialog = false
          this.getUserInformation()
        })
      },

      // 删除证书或奖项记录
      toDelCertificatePrize(row, keyName) {
        console.log(row)
        console.log(keyName)
        this.$baseConfirm('确定删除该记录吗?操作不可恢复.', '删除确认', () => {
          delCertificatePrize({ key_name: keyName, keyid: row.keyid }).then(
            (res) => {
              // console.log(res)
              this.$baseMessage('删除成功!', 'success')
              this.getUserInformation()
            }
          )
        })
      },

      // 保存编辑的信息
      toSaveBaseInfo() {
        let bodyData = {}
        for (let i = 0; i < this.userObj.baseInfo.length; i++) {
          bodyData[this.userObj.baseInfo[i].key] = this.userObj.baseInfo[i].text
        }
        userCenterModifyInfo(bodyData).then((res) => {
          this.userObj.editBaseInfo = false
          this.$baseMessage('保存成功', 'success')
          this.getUserInformation()
        })
      },

      // 获取用户信息
      getUserInformation() {
        userCenterInformation().then((res) => {
          // console.log(res)
          this.userObj.sysInfo = res.data.sys_info.filter((ele) => {
            return ['ruizy_code', 'create_time', 'expire'].indexOf(ele.key) > -1
          })
          this.userObj.baseInfo = res.data.base_info
          this.userObj.certificates = res.data.certificates
          this.userObj.showCertificates = res.data.show_certificates
          this.userObj.prizes = res.data.prizes
          this.userObj.showPrizes = res.data.show_prizes
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .show-btn {
    opacity: 1;
  }
  .base-info {
    margin-left: 16px;
    .info-part {
      .part-label {
        font-size: 15px;
        font-weight: 700;
        margin-top: 16px;
        margin-bottom: 8px;
        padding: 1px 2px;
        border-left: 3px solid #ff9800;
        padding-left: 6px;
        background-image: linear-gradient(to right, #70b6ff, #eee, #fff);
      }
      .msg-box {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .edit-btn {
          cursor: pointer;
          margin-left: 20px;
          color: #0073fc;
          font-size: 18px;
          opacity: 0;
        }
        .dele-btn {
          cursor: pointer;
          margin-left: 20px;
          color: #e94242;
          opacity: 0;
        }
        .msg-label {
          width: 60px;
          display: inline-block;
          text-align: justify;
          text-justify: distribute-all-lines;
          text-align-last: justify;
        }
        .msg-width-label {
          width: 76px;
          display: inline-block;
        }
        .msg-content {
          // width: 200px;
          margin-left: 20px;
          color: #0073fc;
          font-weight: 700;
          &:hover {
            .dele-btn {
              @extend .show-btn;
            }
          }
        }
        .msg-fixed-content {
          margin-left: 20px;
          color: #555;
          font-weight: 700;
        }
      }
    }
  }
</style>
